define([
    "app"
], function (app) {
    app.directive("seatType1", function () {
        return {
            restrict: "E",
            require: "^^roomType1",
            template: "<td class='seat-cell' >" +
            "            <div class='seat-wrapper {{direction}}' " +
            "                 ng-mouseenter='changeHoveredSeat({seat:seatModel})'" +
            "                 ng-mouseleave='changeHoveredSeat(null)'" +
            "                 ng-click='clickOperation(seatModel)'" +
            "                 ng-class='{" +
            "                     unselected:seatModel.status.unselected," +
            "                     disabled:seatModel.status.disabled," +
            "                     conflict:seatModel.status.conflict," +
            "                     highlight:seatModel.status.highlight," +
            "                     selected:seatModel.status.selected" +
            "                 }'>" +
            "                <div class='dest'></div>" +
            "                <div class='mat'></div>" +
            "                <div class='back'></div>" +
            "                <div class='left-hand'></div>" +
            "                <div class='right-hand'></div>" +
            "                <div class='order-mark' ng-show='seatModel.order'>{{seatModel.order}}</div>" +
            "            </div>" +
            "        </td>",
            scope: {
                direction: "@",
                seatModel: "="
            },
            link: function (scope, el, attrs, ctrl) {
                scope.changeHoveredSeat = ctrl.changeHoveredSeat;

                scope.clickOperation = function (seat) {
                    if(seat.status.unselected) {
                        ctrl.selectSeat({seat:seat});
                        return;
                    }

                    if(seat.status.selected) {
                        ctrl.unselectSeat({seat:seat});
                    }
                }
            }
        }
    });
});